import { h, shallowRef, defineComponent, provide, InjectionKey } from "vue";
import type { IFlowGraphContext } from "./create";

export const FlowGraphContextKey: InjectionKey<Required<IFlowGraphContext>> = Symbol();

export default function createComponent(context: IFlowGraphContext) {
	const container = shallowRef<HTMLElement | undefined>();

	const wrapEl = shallowRef<HTMLElement | undefined>();

	const FlowGraphProvide = defineComponent({
		setup(_, { slots }) {
			provide(FlowGraphContextKey, context);
			return () => slots?.default?.();
		}
	});

	/**
	 * 展示图形的组件
	 * @returns
	 */
	const GraphComponent = () => {
		return h(
			"div",
			{ ref: wrapEl },
			h("div", {
				ref: container,
				style: { width: "100%", height: "100%" }
			})
		);
	};

	return {
		container,
		wrapEl,
		GraphComponent,
		FlowGraphProvide
	};
}
